<template>
  <el-card class="wrapper" v-loading="loading">
    <query-filter @query="handleMovieListQuery" />
    <div class="table-wrapper">
      <movie-table :data="list" @delete="handleMovieDelete" @update="handleMovieUpdate" @review-query="handleReviewQuery" />
    </div>
    <div class="pagination-wrapper">
      <el-pagination
        background
        @size-change="handleSizeChange"
        :current-page.sync="watchData.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="watchData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </el-card>
</template>

<script>
import QueryFilter from "./components/QueryFilter";
import MovieTable from "./components/MovieTable";
import { getMovieList, deleteMovies } from "@/services";
export default {
  name: "MovieListQuery",
  components: {
    QueryFilter,
    MovieTable
  },
  data() {
    return {
      watchData: {
        keyword: "",
        pubYear: "",
        genre: "",
        region: "",
        current: 1,
        pageSize: 10
      },
      total: 0,
      list: [],
      loading: false
    };
  },
  watch: {
    watchData: {
      deep: true,
      handler(v) {
        this.$router
          .push({ query: { ...this.$route.query, ...v } })
          .catch(err => {}); // 此处会更新$route
        this.fetchMovieList();
      }
    },
    $route: {
      immediate: true,
      handler() {
        this.initialState(); // 此处会更新watchData
      }
    }
  },
  methods: {
    handleReviewQuery(id) {
      this.$router.push(`/movie/${id}/review`)
    },
    handleMovieDelete({ id, title }) {
      this.$confirm(`确认删除标题为 "${title}" 的电影吗？`, "删除确认")
        .then(() => {
          this.loading = true;
          deleteMovies(id)
            .then(() => {
              this.$message.success("删除成功");
              this.fetchMovieList();
            })
            .catch(err => {
              this.$message.error(`删除失败: ${err.message}`);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    handleMovieUpdate(id) {
      this.$router.push(`/movie/${id}`);
    },
    handleMovieListQuery(data) {
      this.watchData = {
        ...this.watchData,
        ...data,
        current: 1
      };
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size;
    },
    fetchMovieList() {
      this.loading = true;
      getMovieList(this.queryParams)
        .then(res => {
          const { subjects, total } = res;
          this.total = total;
          this.list = subjects;
        })
        .catch(err => this.$message.error(`获取电影列表失败: ${err.message}`))
        .finally(() => (this.loading = false));
    },
    initialState() {
      const {
        keyword,
        genre,
        region,
        current,
        pageSize,
        pubYear
      } = this.$route.query;
      this.watchData.keyword = keyword || "";
      this.watchData.genre = genre || "0";
      this.watchData.region = region || "0";
      this.watchData.pubYear = pubYear || "";
      this.watchData.current = +current || 1;
      this.watchData.pageSize = +pageSize || 10;
      // 不使用 this.watchData的原因是为了防止fetch两次
    }
  },
  computed: {
    queryParams() {
      return {
        start: (this.watchData.current - 1 || 0) * this.watchData.pageSize,
        limit: this.watchData.pageSize,
        ...this.watchData
      };
    }
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  min-height: calc(100vh - 56px - 48px);
  padding: 20px;
  .table-wrapper {
    margin: 20px 0;
  }
}
</style>